<template>
    <span class="my_check">
        <span>
            <div class="list">
                <template v-for="(item,index) in list">
                    <div :key="item[props.value]" @click="onChange(item,index)" :class="{'activeClass': item.isCheck, 'list-item':true }">
                        {{item[props.label]}}
                    </div>
                </template>
            </div>
        </span>
    </span>
</template>

<script>
import MODEL from '@/mixins/model';

export default {
    mixins: [MODEL],
    name: 'my-checkbox',
    props: {
        value: {
            type: [Array, String],
            default() {
                return [];
            },
        },
        action: {
            type: String,
            default: '',
        },
        other: {
            type: Boolean,
            default: false,
        },
        data: {
            type: Array,
            default() {
                return [];
            },
        },
        props: {
            type: Object,
            default() {
                return {
                    value: 'key',
                    label: 'value',
                };
            },
        },
        readonly: {
            type: Boolean,
            default: false,
        },
        all: {
            type: Boolean,
            default: false,
        },
        modelStr: {
            type: Boolean,
            default: false,
        },
        strSpliter: {
            tyep: String,
            default: ',',
        },
    },
    data: function () {
        return {
            list: [],
            otherController: false,

            readonlyStr: '',
            checkboxGroup1: [],
        };
    },
    computed: {},
    watch: {
        // data: {
        //     handler: function (n, o) {
        //         if (n != o) {
        //             this.list = n;
        //             this.readonlyStr = this.fetchKey();
        //         }
        //     },
        //     deep: true,
        // },
        // value: function (n, o) {
        //     this.readonlyStr = this.fetchKey();
        // },
        // input: function (n, o) {
        //     if (n.slice(-1) != o.slice(-1) && /,|\/|;|、|，/.test(n.slice(-1))) {
        //         ShowMsg.call(this, '无效的特殊字符', 'error');
        //         this.input = o;
        //     }
        // },
    },

    methods: {
        onChange(val, index) {
            val.isCheck = !val.isCheck;
            let amout = 0;
            // let str = '';
            let arrName = [];
            let arrCode = [];
            this.list.forEach((item) => {
                if (item.isCheck) {
                    amout = parseFloat((amout + (item.amount - 0)).toFixed(2));
                    // str = str + ',' + item.valuename;
                    arrName.push(item.valuename);
                    arrCode.push(item.id)
                }
            });
            this.model = arrCode.join(',');

            this.$emit('update:valuename', arrName.join(','));
            this.$emit('update:amout', amout);
            this.$emit('click')
        },

        queryData: function () {
            if (!!this.action) {
                this.$get(this.action, function (data) {
                    data.forEach((item) => {
                        item.isCheck = false;
                    });
                    this.list = data;
                });
            } else {
                this.list = this.data;
                // this.readonlyStr = this.fetchKey();
            }
        },

        // fetchKey: function () {
        //     var that = this;
        //     var res = [];
        //     this.list.forEach(function (item) {
        //         if (that.all) {
        //             res.push(item[that.props.label]);
        //         } else {
        //             if (item[that.props.value] == that.value) {
        //                 res.push(item[that.props.label]);
        //             }
        //         }
        //     });
        //     return res.join(',');
        // },
    },
    mounted: function () {
        this.queryData();
    },
};
</script>


<style lang="scss" scoped>
@import '@css/var.scss';

.my_check {
    .list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;

        .list-item {
            width: 200px;
            height: 70px;
            border: 2px solid #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            &:hover {
                color: $primaryColor;
                border: 2px solid $primaryColor;
            }
        }

        .activeClass {
            color: $primaryColor;
            border: 2px solid $primaryColor;
        }
    }
}

@media screen and (max-width: 500px) {
    .my_check {
        ::v-deep .el-checkbox {
            margin-left: 0;
            margin-right: 1em;
        }
    }
}
</style>
